<template>
    <div class="login_container">
        <div class="login_title">
            <a-divider>登&nbsp;录</a-divider>
        </div>
        <a-form layout="vertical" ref="refForm" :model="form" :rules="rules">
            <a-form-item name="username">
                <a-input
                    placeholder="请输入用户名"
                    v-model:value="form.username"
                    allow-clear
                    autocomplete="off"
                    @keyup.enter="handleLogin"
                >
                    <template #prefix>
                        <Icon icon="UserOutlined" style="color: rgba(0, 0, 0, 0.3)" />
                    </template>
                </a-input>
            </a-form-item>
            <a-form-item name="password">
                <a-input-password
                    placeholder="请输入密码"
                    v-model:value="form.password"
                    allow-clear
                    autocomplete="off"
                    @keyup.enter="handleLogin"
                >
                    <template #prefix>
                        <Icon icon="LockOutlined" style="color: rgba(0, 0, 0, 0.3)" />
                    </template>
                </a-input-password>
            </a-form-item>
            <a-form-item>
                <a-checkbox>记住我</a-checkbox>
            </a-form-item>
            <a-form-item class="operation_item">
                <a-button type="primary" block @click="handleLogin" :loading="logining">登录</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup lang="ts">
// Vue、Plugin
import { ref, } from 'vue';
import { Bus, BusEvent } from '@/plugin';
// 组件
import { message } from 'ant-design-vue';
import Icon from '@/component/common/Icon.vue';
// Api
import { ApiLogin } from '@/axios/api';
// Model
import { Result } from '@/model/common';
import { PasswordLoginForm } from '@/model/login';

const refForm = ref();
const form = ref<PasswordLoginForm>(new PasswordLoginForm());
const rules = PasswordLoginForm.rules;
const logining = ref<boolean>(false);

const handleLogin = () => {
    refForm.value.validate()
        .then(() => {
            passwordLogin();
        })
}

const passwordLogin = () => {
    logining.value = true;
    ApiLogin.passwordLogin(form.value)
        .then(() => {
            Bus.emit(BusEvent.LOGIN_SUCCESS);
        })
        .catch((err: Result) => {
            message.error(`登录失败！${err ? err?.msg : ''}`);
            logining.value = false;
        })
}
</script>

<style lang="less">
.login_container {
    width: 380px;
    padding: 24px 36px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.3);

    .login_title {
        .ant-divider {
            margin-bottom: 24px;
            font-size: 20px;
            font-weight: bold;
        }
    }

    .ant-form {
        .ant-form-item {
            .ant-input-affix-wrapper {
                background-color: rgba(255, 255, 255, 0.3);

                & > input.ant-input {
                    background-color: rgba(255, 255, 255, 0);
                }
            }
        }
        .operation_item {
            margin-bottom: 8px;
        }
    }
}
</style>